import React, { memo } from 'react'
import styles from './index.module.scss'
import { useRouter } from 'next/router'
import message from '@c/message'
import { videoProps, videoPlayStatus } from '../../store'
import { useRecoilValue } from 'recoil'
import { useVideo } from '../../utils'
import { Broadcast, Tooltip } from '../../components'
import cm from 'classnames'
import VolumeComponent from './volume'
import { useErrorCodeValue } from '../../error-center'

const Monitor = () => {
  const errorCode = useErrorCodeValue()
  const isPlay = useRecoilValue(videoPlayStatus)
  const { handleChangePlayState } = useVideo()
  const { hideNext, totalSize } = useRecoilValue(videoProps)
  const router = useRouter()
  const { ep, id } = router.query
  const currIndex = +ep
  const goNext = e => {
    e.stopPropagation()
    const isEnd = currIndex >= totalSize
    if (isEnd) {
      message({ content: '当前是最后一集~' })
    } else {
      const url = router.pathname.replace('[id]', id).replace('[ep]', currIndex + 1)
      router.replace(url)
    }
  }

  const togglePlay = e => {
    e.stopPropagation()
    if (errorCode) {
      return
    }
    handleChangePlayState()
  }

  return (
    <div className={styles['controls-menu-left']}>
      <Tooltip
        title={!isPlay ? '播放' : '暂停'}
        className={styles.icon}
        icon={<Broadcast iconClass={!isPlay ? 'player' : 'pause'} onClick={togglePlay} />}
      />
      {!hideNext && totalSize > 1 && currIndex < totalSize ? (
        <Tooltip title="下一集" className={cm(styles.icon)} icon={<Broadcast iconClass="next" onClick={goNext} />} />
      ) : null}
      {/* 音量组件*/}
      <VolumeComponent />
    </div>
  )
}

export default memo(Monitor)
